<template>
  <!--模板-->
  <el-button @click="setMeta">设置 表单控件 属性</el-button><br>
  <hr>
  <el-row :gutter="20" > 
    <el-col :span="18">
      <el-slider v-model="formMeta.formMeta.formColCount" :min="1" :max="7" />
      <nf-form
        v-form-drag="formMeta"
        :model="model"
        :partModel="model2"
        v-bind="formMeta"
      >
        <template v-slot:text>
          <h1>外部插槽22 </h1>
          <input v-model="model.text"/>
        </template>
      </nf-form>
    </el-col>
    <el-col :span="6">
      <div
        v-for="(item, key) in model"
        :key="key"
      >
        {{key}}：<span v-if="Array.isArray(item)">【
          <div v-for="item2 in item" :key="item2">
            &nbsp; &nbsp; {{item2}}
          </div>
          】
        </span>
        <span v-else>{{item}}</span>
      </div>
    </el-col>
   
  </el-row>
  <help-form-card
    :drawerInfo="drawerInfo"
    :meta="formMeta"
    :formDom="formDom"
  ></help-form-card>
  
</template>

<script lang="ts">
  import { defineComponent, reactive, ref } from 'vue'
  import { createModel, nfForm, nfFormSlot } from '../../../../lib-elp/main'
  import { helpFormCard } from '../../../../lib-help/main'

  // 自定义指令
  import { _formDrag } from '../../../../lib-elp/main'

  import _formMeta from './form.json'

  export default defineComponent({
    name: 'nf-elp-form-page',
    directives: {
      formDrag: _formDrag
    },
    components: {
      nfForm: nfFormSlot,
      helpFormCard
    },
    props: {
    },
    setup(props, context) {

      const formMeta = reactive(_formMeta)
      console.log('读取的 json：', formMeta)

      const { itemMeta } = formMeta
      const { colOrder } = formMeta.formMeta
      const model2 = reactive({})

      // 根据 meta 创建表单的 model
      const model = createModel(itemMeta, colOrder)
      console.log('model：', model)


      // 控制 表单 抽屉的展开收拢
      const drawerInfo = reactive({
        isShow: false,
        isLoad: false
      })

      // 表单的对象
      const formDom = ref(null)
      
      const setMeta = () => {
        drawerInfo.isShow = true
        drawerInfo.isLoad = true
      }

      
      // 控制 字段 抽屉的展开收拢
      const formDrawerInfo = reactive({
        isShow: false
      })
      
      return {
        formDom,
        drawerInfo,
        setMeta,
        formDrawerInfo,
        formMeta,
        model2,
        model
      }
    }
  })
</script>